<template>
	<view class="main">
		<uni-nav-bar dark :fixed="true" shadow background-color="#fff" status-bar title="用户登录" left-icon="left" @clickLeft="back" />
		
		<!-- 登录框 -->
		<view class="content">
			<view class="header">
				<view class="header-logo">
					<image src="../../static/index/heade-logo-tuya.png" mode=""></image>
				</view>
				<view class="logo">
					<image src="../../static/index/logo-tuya.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="mainss">
				<!-- <view class="loginBox">
					<view class="loginInptu">
						<input type="text" v-if="loginMode == 1" class="username" value="" placeholder="请输入用户名/手机号" maxlength="11" @input="phoneInput"/>
						<input type="number" v-else-if="loginMode == 2" class="username" value="" placeholder="请输入手机号" maxlength="11" @input="phoneInput"/>
					</view>
					<view class="loginInptu" v-if="loginMode == 1">
						<input type="password" class="password" value="" placeholder="请输入密码" maxlength="16" @input="passwordInpur"/>
					</view>
					<view class="loginInptu loginInptuCode" v-else-if="loginMode == 2">
						<input type="text" class="code" value="" placeholder="请输入验证码" maxlength="4" @input="codeInput"/>
						<view class="huoquyanzhengma" @click="getCode">{{codeBut}}</view>
					</view>
					<view class="loginUp" @click="loginUp">
						<image src="../../static/index/denglu.png" mode=""></image>
					</view>
				</view>
				 -->
				<!-- 其他登录方式 -->
				<!-- <view class="otherLoginTitle">————————— 其他登录方式 —————————</view> -->
				<view class="otherLogin">
					<button class="box-img" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">				
						手机号快捷登录
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { wxlogin, userlogin, login } from '@/request/api/login.js';
	import { useCartStore } from '@/store/cart.js';
	import { miniPhone } from '@/request/api/vip.js';
	const store = useCartStore();

	export default {
		data() {
			return {
				loginMode: 1,
				usernameType:"text",
				codeBut:"获取验证码",
				loginImage:"../../static/index/logo-tuya.png",
				codeClick:true,
				phone:"",
				password:"",
				code:"",
				avatar: "",
			}
		},
		onLoad() {
			
		},
		methods: {
			getPhoneNumber(e) {
				uni.login({
					complete(i) {
						const params = {
							auth_code: i.code,
							code: e.detail.code
						}
						miniPhone(params).then(res => {
							console.log(res)
							if (res.code == 200) {
								store.setUserInfo(res.data);
								store.setToken(res.data.ApiToken);
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									duration:1000
								});
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/my/my'
									})
								}, 1000)
							}
						})
					}
				})
			},

			loginCode() {
				this.loginMode = 2
				this.usernameType = "number"
			},
			loginPhone() {
				this.loginMode = 1
				this.usernameType = "text"
			},
			// 手机号输入
			phoneInput(e){
				this.phone = e.detail.value
			},
			// 密码输入
			passwordInpur(e){
				this.password = e.detail.value
			},
			// 验证码输入
			codeInput(e){
				this.code = e.detail.value
			},
			back() {
				uni.navigateBack({
					delta:1
				})
			},
			sign() {
				uni.navigateTo({
					url: '/pages/login/sign'
				})
			},
			// 点击登录
			async loginUp(){
				var _that = this
				if(_that.phone == ""){
					uni.showToast({
						title: '请输入用户名',
						icon: 'none',
						duration:1000
					});
				}else if(_that.password == "" && _that.loginMode == 1){
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration:1000
					});
				}else if(_that.code == "" && _that.loginMode == 2){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
						duration:1000
					});
				}else{
					// 登录
					const result = await login({
						account: _that.phone,
						password: _that.password
					}).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: 'success',
								duration:1000
							});
							
							setTimeout(() => {
								store.setUserInfo(res.data);
								store.setToken(res.data.ApiToken);
								uni.switchTab({
									url: "/pages/index/index"
								});
							}, 1000);
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			width: 100%;
			position: relative;
			.header-logo > image {
				width: 100%;
				height: 330rpx;
			}
			.logo {
				width: 300rpx;
				position: absolute;
				left: 0;
				right: 0;
				margin: 0 auto;
				top: 100rpx;
				bottom: 0;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	page {
		height: 100%;
	}

	.mainss {
		width: 100%;
		height: 100%;
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 70rpx 70rpx 0rpx 0rpx;
		position: absolute;
		top: 400rpx;
	}

	.mainHead {
		height: var(--status-bar-height);
	}

	.loginTop {
		width: 700upx;
		margin: 0 auto;
		height: 40upx;
		line-height: 40upx;
		display: flex;
		justify-content: space-between;
		font-size: 30upx;
		margin-top: 10upx;
	}

	.weiixnLogin > image {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
		text-align: center;
	}
	.loginTopBack {
		width: 35upx;
		height: 35upx;
	}

	.loginUp {
		width: 100upx;
		height: 100upx;
		margin: 0 auto;
		padding: 15upx;
		border: 1upx solid #333333;
		border-radius: 60upx;
		margin-top: 60upx;
		background: #333333;
	}
	
	.loginUp > image {
		width: 100upx;
		height: 100upx;
	}
	
	.box-img {
		width: 380rpx;
		height: 80rpx;
		background-color: #fa2c19;
		color: #fff;
		line-height: 80rpx;
		margin-top: 20rpx;
		font-size: 32rpx;
	}
	
	.code {
		background: url(../../static/code.png)no-repeat;
		background-position: 10upx;
		padding-left: 65upx;
		width: 300upx;
		background-size: 58upx;
	}

	.huoquyanzhengma {
		background: #333333;
		color: #fff;
		line-height: 85upx;
		width: 200upx;
		text-align: center;
		border-radius: 10upx;
	}

	.loginBox {
		width: 650upx;
		margin: 60upx auto;
		padding-top: 100rpx;
	}

	.username {
		/* background: url(../../static/shouji.png)no-repeat;
		background-position: 10upx; */
		padding-left: 65upx;
	}

	.password {
		/* background: url(../../static/mima.png)no-repeat;
		background-position: 5upx; */
		padding-left: 70upx;
	}

	.loginInptu {
		width: 500upx;
		height: 80upx;
		margin: 0 auto;
		background: #fff;
		margin-top: 20upx;
		line-height: 80upx;
		border-radius: 10upx;
	}

	.loginInptuCode {
		display: flex;
	}

	.loginInptu>input {
		height: 100%;
		font-size: 30upx;
		border: 1rpx solid gray;
		border-radius: 20rpx;
	}

	.logoImgBox {
		text-align: center;
		margin: 0 auto;
		margin-bottom: 100upx;
		margin-top: 200upx;
	}
	.logoImgBox > image {
		width: 300rpx;
		height: 100rpx;
	}

	.otherLogin {
		width: 500upx;
		height: 300rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.otherLogin>view {
		width: 95upx;
		height: 95upx;
		border-radius: 95upx;
	}

	.otherLoginTitle {
		width: 100%;
		text-align: center;
		color: #555555;
		font-size: 28upx;
		line-height: 80upx;
	}

	.bottomBox {
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 60upx;
		left: 0;
		right: 0;
		margin: auto;
		height: 30upx;
		line-height: 30upx;
		font-size: 32upx;
	}

	.wangjimima {
		border-right: 1rpx solid #555;
		height: 25upx;
		padding-right: 15upx;
	}

	.yonghuzhuce {
		padding-left: 15upx;
	}
</style>
